import React from 'react';
import director  from 'director';

var App = React.createClass({
    
    getInitialState () {
        return {
            route:'/',
            type:'whole',
            obj:{}
        };
    },

   componentDidMount () {
        var tthis = this,   
            routes = {
               '/:module': function(module) {tthis.routerHandle(module,'whole',{})},
               '/:module/:type': function(id,type) {tthis.routerHandle(module,type,{})},
               '/:module/:type/:obj': function(id,type,obj) {console.log(id);tthis.routerHandle(module,type,obj)},
               '/.*': function(module) {tthis.routerHandle('home','whole',{})},
            };
        var router = director.Router(routes);
        router.init();
    },

    routerHandle : function(module,type,obj) {
        console.log('routerHandle',module,type,obj);
        this.setState({
            route: module,
            type:type,
            obj:obj
        });
    },

    render () {
        var Child;
        /*         
        var about = 'About';
        switch (this.state.route) {
            case 'about': 
                var About = require('./js/components/'+about+'.react');
                Child = About; 
            break;
            case 'inbox': 
                var Inbox = require('./js/components/Inbox.react');
                Child = Inbox; 
            break;
            default:       
                var Home = require('./js/components/Home.react');
                Child = Home;
        }
        */
        console.log('router',this.state.route);
        
        var moduleName;
        if (this.state.route == '/') {
            moduleName = 'Home';
        } else {
            var moduleA = this.state.route.substr(0,1).toUpperCase(),
                moduleB = this.state.route.substr(1);
            moduleName = moduleA+moduleB;
        }
       
        Child = require('./js/components/'+moduleName+'.react');

        return (
          <div>
            <h1>App</h1>
            <div>
            <ul>
              <li><a href="#/about">About</a></li>
              <li><a href="#/inbox">Inbox</a></li>
              <li><a href="#/todo">Todo</a></li>
            </ul>
            </div>
            <div className="box">
              <Child/>
            </div>
          </div> 
        )
      }
});

React.render(<App />, document.body);
